<template>
  <div>
    <div class="address">
      <div>
        <p>您当前所在位置</p>
        <router-link to="/" class="link">订单详细-个单</router-link>
      </div>
    </div>
    <div class="roder-details">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="订单基本信息">
          <div class="info">
            <h3 class="title">订单信息</h3>
            <div class="list">
              <div class="list-div">
                <div>
                  <p>订单编号</p>
                  <span>{{ orderDetail.orderSn }}</span>
                </div>
                <div>
                  <p>门店编号</p>
                  <span>{{ orderDetail.storeCode }}</span>
                </div>
                <div>
                  <p>创建时间</p>
                  <span>{{ orderDetail.createTime }}</span>
                </div>

                <div v-if="orderDetail.payTime!='' && orderDetail.payTime!=null">
                  <p>支付时间</p>
                  <span>{{ orderDetail.payTime }}</span>
                </div>

                <!--                <div>
                                  <p>订单金额</p>
                                  <span>{{ orderDetail.orderMoney }}元</span>
                                </div>-->
                <div>
                  <p>订单状态</p>
                  <span v-if="orderDetail.status=='1'">已支付</span>
                  <span v-if="orderDetail.status=='2'">已提交</span>
                  <span v-if="orderDetail.status=='3'">已接单</span>
                  <span v-if="orderDetail.status=='4'">等待面料</span>
                  <span v-if="orderDetail.status=='5'">剪裁</span>
                  <span v-if="orderDetail.status=='6'">缝制</span>
                  <span v-if="orderDetail.status=='7'">发货</span>
                  <span v-if="orderDetail.status=='8'">订单完成</span>
                  <span v-if="orderDetail.status=='9'">售后</span>
                  <span v-if="orderDetail.status=='10'">驳回</span>
                  <span v-if="orderDetail.status=='11'">未支付</span>
                </div>

                <div>
                  <p>联系人</p>
                  <span>{{ orderDetail.addressPerson }}</span>
                </div>

                <div>
                  <p>联系电话</p>
                  <span>{{ orderDetail.addressPhone }}</span>
                </div>
                <!--                <el-button
                                    type="primary"
                                    @click="openFullScreen2">
                                  服务方式
                                </el-button>-->

              </div>

            </div>
            <h3 class="title">基本信息</h3>
            <div class="list">
              <div class="list-div">
                <div>
                  <p>顾客订单编号</p>
                  <span>{{ orderDetail.customerCode }}</span>
                </div>
                <!--<div>
                    <p>面料来源</p>
                    <span>{{orderDetail.fabricSource}}</span>
                </div>-->
                <div>
                  <p>快递方式</p>
                  <!--<span>{{orderDetail.courierName}}</span>-->
                  <span v-if="orderDetail.courierId=='1'">顺丰快递</span>
                  <span v-if="orderDetail.courierId=='2'">申通快递</span>
                  <span v-if="orderDetail.courierId=='3'">中通快递</span>
                  <span v-if="orderDetail.courierId=='4'">德邦快递</span>
                </div>

                <div>
                  <p>顾客性别</p>
                  <span>{{ orderDetail.customerSex }}</span>
                </div>
                <div>
                  <p>业务来源</p>
                  <span>{{ orderDetail.businessSource }}</span>
                </div>
                <div>
                  <p>地址</p>
                  <span>{{ orderDetail.address }}</span>
                </div>
                <div>
                  <p>顾客姓名</p>
                  <span>{{ orderDetail.customerName }}</span>
                </div>
                <div>
                  <p>包装方式</p>
                  <span>{{ orderDetail.packageType }}</span>
                </div>
              </div>

            </div>

            <!--接下来都是跟着产品走的数据，遍历每一个产品-->
            <div v-for="(item,key) in orderDetail.productInfoList" :key="item.id">
              <h3 class="title">{{ item.productName }}</h3>
              <h3 class="title">品类版型</h3>
              <div class="list">
                <div class="list-div">
                  <div>
                    <p>顾客性别</p>
                    <span v-if="item.sex=='0'">男性</span>
                    <span v-if="item.sex=='1'">女性</span>
                  </div>
                  <div v-for="(pl,key) in item.plbx" :key="pl.id">
                    <p>{{ pl.smallTemplateName }}</p>
                    <span>{{ pl.categoryName }}</span>
                  </div>
                </div>

              </div>


              <!--              <h3 class="title">面料辅料</h3>
                            <div class="list">
                              <div class="list-div">
                                <div v-for="(fabric,key) in item.fabricList" :key="key.id">
                                  <p v-if="fabric.isMianFu=='0'">面料</p>
                                  <p v-if="fabric.isMianFu=='1'">里布</p>
                                  <p v-if="fabric.isMianFu=='2'">低领里</p>
                                  <span>{{ fabric.fabricCode }}</span>
                                </div>
                              </div>

                            </div>-->


              <h3 class="title">款式工艺</h3>
              <div class="list">
                <div class="list-div">
                  <!--<div>
                      <p>品类</p>
                      <span>{{item.productName}}</span>
                  </div>
                  <div></div>
                  <div></div>-->
                  <div v-for="(ks,key) in item.ksgy" :key="key.id">
                    <p>{{ ks.smallTemplateName }}</p>
                    <span>{{ ks.categoryName }}</span>
                  </div>
                  <!--<div>
                      <p>外大袋</p>
                      <span>平袋无袋盖</span>
                  </div>-->
                </div>
              </div>

              <h3 class="title">面料辅料</h3>
              <div class="list">
                <div class="list-div">
                  <div>
                    <p>面料</p>
                    <span>{{ item.fabricCode }}</span>
                  </div>

                  <div>
                    <p>面料备注</p>
                    <span>{{ item.fabricRemark }}</span>
                  </div>

                  <div v-if="item.libuInfo!=null">
                    <p>里布</p>
                    <span>{{ item.libuInfo.libuCode }}</span>
                  </div>
                  <div v-if="item.dilinniInfo!=null">
                    <p>底领呢</p>
                    <span>{{ item.dilinniInfo.dilinniNumber }}</span>
                  </div>

                  <div v-for="(ks,key) in item.buttonsInfoList" :key="key.id">
                    <p>纽扣</p>
                    <span>{{ ks.buttonsCode }}</span>
                  </div>
                </div>
              </div>

              <h3 class="title">绣字撞色</h3>
              <h4 class="title2">绣字</h4>
              <div class="list">
                <div class="list-div">
                  <div v-if="item.xiuziType == '无绣字'">
                    <p>无绣字</p>
                  </div>
                  <div v-if="item.xiuziType != '无绣字' && item.xiuziType == '文字'">
                    <p>绣字一</p>
                    <span class="b">{{ item.xiuziOneNeirong }}</span>
                  </div>
                  <div v-if="item.xiuziType != '无绣字' && item.xiuziType == '文字'">
                    <p>绣字二</p>
                    <span class="b">{{ item.xiuziTwoNeirong }}</span>
                  </div>
                  <div v-if="item.xiuziType != '无绣字' && item.xiuziType == '文字'">
                    <p>绣字颜色</p>
                    <span v-if="item.xiuziColorEntity != null">{{ item.xiuziColorEntity.colorName }}</span>
                  </div>

                  <div v-if="item.xiuziType != '无绣字'">
                    <p>绣字部位</p>
                    <span>{{ item.xiuziWeizhi }}</span>
                  </div>
                  <div v-if="item.xiuziType != '无绣字' && item.xiuziType == '文字'">
                    <p>绣字字体</p>
                    <span v-if="item.font!=null">{{ item.font.embroideredName }}</span>
                  </div>
                  <div v-if="item.xiuziType != '无绣字' && item.xiuziType == '图片'">
                    <p>绣字图片编号</p>
                    <span>{{ item.xiuziImg }}</span>
                  </div>

                  <div v-if="!!item.zidingyiImg">
                    <p>自定义图片</p>
                    <img
                        style="width: 100px; height: 100px;margin-right:10px"
                        :src="item.zidingyiImg" data-action="zoom"
                        fit="fit"></img>
                  </div>
                  <div>
                  </div>
                </div>
              </div>

              <h4 class="title2">撞色</h4>
              <div class="list">
                <div class="list-div">
                  <div v-for="(zs,key) in item.allConColor" :key="zs.id">
                    <p>{{ zs.contrastColorName }}</p>
                    <span>{{ zs.colorName }}</span>
                  </div>
                </div>
              </div>

              <h3 class="title">量体信息</h3>
              <!--<h4 class="title2">客户信息</h4>
              <div class="list">
                  <div class="list-div">
                      <div>
                          <p>尺寸类型</p>
                          <span>舒适</span>
                      </div>
                      <div>
                          <p>体重</p>
                          <span>95kg</span>
                      </div>
                      <div>
                          <p>身高</p>
                          <span>170cm</span>
                      </div>

                      <div>
                          <p>年龄</p>
                          <span>29岁</span>
                      </div>
                  </div>
              </div>-->

              <h4 class="title2">成衣尺寸</h4>

              <div class="list" v-if="item.cheng==null">
                <div class="list-div">
                  <div>
                    <p>暂无数据</p>
                  </div>
                </div>
              </div>

              <div class="list">
                <div class="list-div">
                  <div v-for="(proSize,key) in item.cheng" :key="proSize.id">
                    <p>{{ proSize.sizeName }}</p>
                    <span>{{ proSize.bodysizeValue }}{{ proSize.unit }}</span>
                  </div>
                </div>
              </div>

              <h4 class="title2">净体尺寸</h4>

              <div class="list" v-if="item.jing==null">
                <div class="list-div">
                  <div>
                    <p>暂无数据</p>
                  </div>
                </div>
              </div>

              <div class="list">
                <div class="list-div">
                  <div v-for="(proSize,key) in item.jing" :key="proSize.id">
                    <p>{{ proSize.sizeName }}</p>
                    <span>{{ proSize.bodysizeValue }}{{ proSize.unit }}</span>
                  </div>
                </div>
              </div>

              <h4 class="title2">体型数据</h4>

              <div class="list" v-if="item.sizeInfoList==null">
                <div class="list-div">
                  <div>
                    <p>暂无数据</p>
                  </div>
                </div>
              </div>

              <div class="list">
                <div class="list-div">
                  <div v-for="(tx,key) in item.sizeInfoList" :key="tx.id">
                    <p>{{ tx.sizeName }}</p>
                    <span>{{ tx.size1 }}</span>
                  </div>
                </div>
              </div>

              <div v-show="false">
                <!--量体图片-->
                {{ item.liangtiImgs != null ? item.imglist = item.liangtiImgs.split(",") : item.imglist = [] }}
              </div>
              <div>
                <img v-for="(oneimg,index3) in item.imglist"
                     data-action="zoom"
                     style="width: 100px; height: 100px;margin-right:10px"
                     :src="oneimg"
                     fit="fit"></img>
              </div>

              <h4 class="title2">量体备注</h4>
              <div class="list" v-if="item.liangtiRemark==null">
                <div class="list-div">
                  <div>
                    <p>暂无数据</p>
                  </div>
                </div>
              </div>

              <div v-if="item.liangtiRemark!=null">
                <p style="font-weight: bolder">{{ item.liangtiRemark }}</p>
              </div>

              <!--<h4 class="title">订单附加条件</h4>
              <div class="list">
                  <div class="list-div">
                      <div>
                          <p>式样</p>
                          <span>{{orderDetail.shiyang}}</span>
                      </div>
                      <div>
                          <p>改款打样</p>
                          <span>{{orderDetail.modifiedYang}}</span>
                      </div>
                      <div>

                      </div>

                      <div>
                          <p>紧急指数</p>
                          <span>{{orderDetail.emergency}}</span>
                      </div>
                      <div>
                          <p>品牌标</p>
                          <span v-if="orderDetail.brandLabel!='null'">{{orderDetail.brandLabel}}</span>
                      </div>

                  </div>
              </div>-->
            </div>
            <!--遍历的数据结束-->


            <h3 class="title">订单费用明细</h3>
            <h3 class="title">面料费用</h3>
            <div class="table-css">
              <a-table class="table1" lign="center" :columns="fabriclist"
                       :data-source="orderDetail.allFabric"
                       :pagination="false">
                <a slot="k7" slot-scope="text" style="color:#C49D18">{{ text }}</a>
                <a slot="k6" slot-scope="text" style="color:#C49D18">{{ text }}</a>
                <a slot="k8" slot-scope="text" style="color:#C49D18">{{ text }}</a>
              </a-table>
            </div>
            <h3 class="title">加工费用</h3>
            <!--            <h4 class="title2">加工费用</h4>-->
            <div>
              <div class="table-css">
                <a-table class="table1" lign="center" :columns="allprolist"
                         :data-source="orderDetail.productInfoList"
                         :pagination="false">
                  <a slot="k7" slot-scope="text" style="color:#C49D18">{{ text }}</a>
                  <a slot="k6" slot-scope="text" style="color:#C49D18">{{ text }}</a>
                  <a slot="k8" slot-scope="text" style="color:#C49D18">{{ text }}</a>
                </a-table>
              </div>
            </div>

            <h3 class="title">加价项目</h3>
            <div>
              <div class="table-css">
                <h3 class="title">绣字撞色加价</h3>
                <a-table class="table1" lign="center" :columns="jiajia"
                         :data-source="jiajiaList"
                         :pagination="false">
                  <!--<a slot="k7" slot-scope="text" style="color:#C49D18">{{text}}</a>
                  <a slot="k6" slot-scope="text" style="color:#C49D18">{{text}}</a>
                  <a slot="k8" slot-scope="text" style="color:#C49D18">{{text}}</a>-->
                </a-table>
              </div>
            </div>
            <div>
              <div class="table-css">
                <h3 class="title">辅料加价</h3>
                <a-table class="table1" lign="center" :columns="fuwuFabricTitle"
                         :data-source="shouFeiList"
                         :pagination="false">
                </a-table>
              </div>
            </div>

            <h3 class="title">收费服务</h3>
            <el-table :data="orderFujiaList" style="width: 100%" :border="true"
                      :header-cell-style="{'text-align':'center'}"
                      :cell-style="{'text-align':'center'}">

              <el-table-column label="序号" width="50">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="品类名称" prop="cateogryName"></el-table-column>
              <el-table-column label="产品名称" prop="productName"></el-table-column>
              <el-table-column label="收费项目" prop="costName"></el-table-column>
              <el-table-column label="金额(元)" prop="price"></el-table-column>
            </el-table>

            <h5 class="price">合计金额：<span>{{ orderDetail.orderMoney }}元</span></h5>
            <h5 v-if="orderDetail.priorPrice!=0" class="price">调价前金额：<span>{{ orderDetail.priorPrice }}元</span></h5>

            <h5 v-if="orderDetail.priorPrice!=0" class="price">原总金额：<span>{{ orderDetail.firstPrice }}元</span></h5>

            <h5 v-if="orderDetail.status>=1 && orderDetail.status<=10 && orderDetail.deductionPay!=0"
                class="price">抵扣额度支付：<span>{{ orderDetail.deductionPay }} 元</span></h5>
            <h5 v-if="orderDetail.status>=1 && orderDetail.status<=10 && orderDetail.monthPay!=0"
                class="price">月结剩余额度支付：<span>{{ orderDetail.monthPay }} 元</span></h5>
            <h5 v-if="orderDetail.status>=1 && orderDetail.status<=10 && orderDetail.balancePay!=0"
                class="price">余额支付：<span>{{ orderDetail.balancePay }} 元</span></h5>

            <h3 class="title">订单备注</h3>
            <textarea class="text1" style="color: rgb(153, 153, 153);"></textarea>

            <div class="btns">
              <div class="btn1" @click="drawer = true" v-if="identity == 2 && orderDetail.status=='11'">立即支付</div>
              <div @click="$router.push({path:'/my-order',query:{orderType:0}})" class="btn2">返回</div>
            </div>
          </div>
        </a-tab-pane>

        <a-tab-pane key="2" tab="订单状态跟踪" force-render>
          <div class="info">
            <h3 class="title">订单状态跟踪</h3>
            <div v-for="(item,key) in orderTrackingList" :key="item.id">
              <h4 class="title10">{{ item.createTime }}</h4>
              <div class="text10">
                <p>订单状态:</p>
                <div>
                  <span v-if="item.orderStatus==null">未支付</span>
                  <span v-if="item.orderStatus=='0'">未支付</span>
                  <span v-if="item.orderStatus=='1'">已支付</span>
                  <span v-if="item.orderStatus=='2'">订单售后</span>
                  <span v-if="item.orderStatus=='3'">接单</span>
                  <span v-if="item.orderStatus=='4'">已发货</span>
                  <span v-if="item.orderStatus=='5'">已完成</span>
                  <span v-if="item.orderStatus=='6'">备库</span>
                  <span v-if="item.orderStatus=='7'">驳回</span>
                </div>
              </div>
              <div class="text10">
                <p>订单事件:</p>
                <div>
                  <span>{{ item.thing }}</span>
                </div>
              </div>

              <div class="text10">
                <p>事件备注:</p>
                <div>
                  <span>{{ item.remark }}</span>
                </div>
              </div>

              <div class="text10" v-if="item.orderStatus=='4'">
                <p>物流单号:</p>
                <div>
                  <span>{{ item.logisticsSn }}</span>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="产品状态跟踪">
          <div class="info">
            <h3 class="title">产品状态更新</h3>
            <!--表格化-->
            <el-table :stripe="true" :border="true" :data="productlistTracking">
              <el-table-column
                  align="center"
                  label="序号"
                  type="index"
                  width="50">
              </el-table-column>

              <el-table-column
                  :show-overflow-tooltip="true"
                  align="center"
                  prop="productName"
                  label="产品名称"
              >
              </el-table-column>

              <el-table-column
                  align="center"
                  prop="statusName"
                  label="产品状态"
              >
              </el-table-column>

              <el-table-column
                  :show-overflow-tooltip="true"
                  align="center"
                  prop="createTime"
                  label="更新时间"
              >
              </el-table-column>

              <el-table-column
                  :show-overflow-tooltip="true"
                  align="center"
                  prop="remark"
                  label="备注信息"
              >
              </el-table-column>

              <el-table-column
                  :show-overflow-tooltip="true"
                  align="center"
                  prop="wrater"
                  label="业务流水号"
              >
              </el-table-column>
            </el-table>
            <!--            <div v-for="(item,key) in productlistTracking" :key="item.id">
                          <h4 class="title10">{{ item.createTime }}</h4>
                          <div class="text11">
                            <p>产品名称:</p>
                            <div>
                              <h5>{{ item.productName }}</h5>
                              <p>时间：{{ item.createTime }}</p>
                              <p v-show="item.statusName != null">产品状态：{{ item.statusName }}</p>
                              <p v-show="item.statusName == '产品发货'">运单号：{{ item.yunnumber }}</p>
                              <p v-show=" item.status== 4">产品状态：售后</p>
                              <p>备注信息：{{ item.remark }}</p>
                            </div>
                          </div>
                        </div>-->
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="售后记录跟踪">
          <div class="info">
            <h4 class="title1" style="font-weight: 700;width: auto;">售后订单列表</h4>
            <div class="table-css">
              <a-table class="table1" :row-selection="rowSelection" lign="center" :columns="afterTitle"
                       :loding="true"
                       :pagination="pagination"
                       @change="handleTableChange"
                       :data-source="afterlist">
                <router-link slot="k6" slot-scope="text,record"
                             :to="{path:'/MyAfterSales/AfterSaleGeding',query:{id:record.id}}"
                             style="color:#C49D18">查看详情
                </router-link>
                <!--                                <a slot="k6" slot-scope="text" style="color:#C49D18">{{text}}</a>-->

              </a-table>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!--支付界面弹窗-->
    <el-drawer
        class="el-drawer__body"
        title="详细"
        size="40%"
        :with-header="false"
        :visible.sync="drawer"
        :direction="direction">
      <div style="height: 30px;line-height: 30px;left: 10px;padding-left: 26px;margin-top: 16px;">
        <i class="el-icon-s-order" style="font-size: 16px;">订单结算</i>
      </div>

      <div style="margin-top: 12px;"><span
          style="color: #ADADAD;font-size: 14px;margin-left: 26px;">支付金额（元）</span></div>
      <div style="margin-top: 12px;"><span
          style="color: #333333;font-size: 18px;margin-left: 26px;">{{ orderDetail.orderMoney }}</span>
      </div>
      <div style="margin-top: 36px;"><span style="color: #333333;font-size: 14px;margin-left: 26px;">支付方式</span>
      </div>


      <div style="margin-top: 18px;padding-left: 26px;">
        <el-radio v-model="radio1" label="1" border @change="change_redio(radio1)">支付宝支付</el-radio>
        <el-radio v-model="radio1" label="2" border @change="change_redio(radio1)">微信支付</el-radio>
        <el-radio v-model="radio1" label="3" border @change="change_redio(radio1)">余额支付</el-radio>
      </div>

      <div style="margin-top: 10px;height: 180px;width:100%;" v-show="is_wxshow=='1'" v-loading="loading">
        <div style="margin-left: 140px">
          <p style="font-size: 14px">微信在线支付，请扫下面二维码支付</p>
        </div>
        <div style="width: 146px;height: 146px;background-color: #adacac;margin-left: 160px" id="qrCode"
             ref="qrCodeDiv"></div>
      </div>

      <div style="margin-top: 46px;"><span style="color: #333333;font-size: 14px;margin-left: 26px;">当前余额</span>
      </div>
      <div style="margin-top: 12px;"><span
          style="color: #333333;font-size: 18px;margin-left: 26px;">月结额度剩余：{{ userDetail.remainingLimit }}元</span>
      </div>
      <div style="margin-top: 12px;"><span
          style="color: #333333;font-size: 18px;margin-left: 26px;">账户余额：{{ userDetail.accountBalance }}元</span>
      </div>
      <div style="margin-top: 12px;"><span
          style="color: #333333;font-size: 18px;margin-left: 26px;">抵扣额度：{{ userDetail.deductionLimit }}元</span>
      </div>
      <!--<div style="margin-top: 12px;"><span style="color: #333333;font-size: 18px;margin-left: 26px;">{{userDetail.monthLines}}元</span>
      </div>-->

      <el-button type="primary" @click="buynow"
                 style="background: #303030;margin-left: 26px;margin-top: 36px;"><span
          style="font-size: 14px;color: #FFE56D">立即支付</span></el-button>
    </el-drawer>

    <div class="pay" v-loading="loading" v-show="is_show=='1'">
    </div>

  </div>


</template>

<!--<template>-->
<!--  <div class="pay" v-loading="loading">-->
<!--  </div>-->
<!--</template>-->


<script>
import {getAction, postAction} from "../../api/manage";
// @ is an alias to /src
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import Qs from "qs";
import QRCode from 'qrcodejs2';

// 收费服务项
const fuwuFabricTitle = [{
  title: '序号',
  dataIndex: '',
  key: 'rowIndex',
  align: 'center',
  customRender: function (t, r, index) {
    return parseInt(index) + 1
  }
},
  /*{
    title: '品类名称',
    align: "center",
    dataIndex: 'plname'
  },*/
  {
    title: '产品名称',
    align: "center",
    dataIndex: 'productName'
  },
  {
    title: '项目',
    align: "center",
    dataIndex: 'name'
  },
  {
    title: '类型',
    align: "center",
    dataIndex: 'type'
  },
  {
    title: '金额',
    align: "center",
    dataIndex: 'price'
  },
];

// 这是订单的所有面料列表
const fabriclist = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '面料编号',
    align: "center",
    dataIndex: 'fabricCode'
  },
  {
    title: '米数',
    align: "center",
    dataIndex: 'mishu'
  },
  {
    title: '阶梯价',
    align: "center",
    dataIndex: 'fabricPrice'
  },
  {
    title: '面料备注',
    align: "center",
    dataIndex: 'fabricRemark'
  },
  {
    title: '客户折扣',
    align: "center",
    dataIndex: 'kehuzk',
    customRender: function (text) {
      if (text == '1') {
        return '100%'
      } else {
        return (Number(text) * 100) + "%"
      }
    }
  },
  {
    title: '折后单价',
    align: "center",
    dataIndex: 'afterPrice'
  },
  {
    title: '总金额',
    align: "center",
    dataIndex: 'allPrice'
  },
];

// 加价列表表头
const jiajia = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '产品名称',
    align: "center",
    dataIndex: 'productName'
  },
  {
    title: '参数名称',
    align: "center",
    dataIndex: 'costName'
  },
  {
    title: '总金额',
    align: "center",
    dataIndex: 'price'
  },
];

// 加工费用列表
const allprolist = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '产品名称',
    align: "center",
    dataIndex: 'productName'
  },
  /*{
    title: '品类名称',
    align: "center",
    dataIndex: 'pingleiName'
  },*/
  {
    title: '工艺',
    align: "center",
    dataIndex: 'gyname'
  },
  /*{
      title: '性别',
      align: "center",
      dataIndex: 'sex',
      customRender: function (text) {
          if (text == '0') {
              return '男'
          } else if (text == '1') {
              return '女'
          }
      }
  },*/
  {
    title: '数量',
    align: "center",
    dataIndex: 'numbers'
  },
  {
    title: '标准单价',
    align: "center",
    dataIndex: 'zheqianPrice'
  },
  {
    title: '客户折扣',
    align: "center",
    dataIndex: 'khzk',
    customRender: function (text) {
      if (text == '1') {
        return '100%'
      } else {
        return (Number(text) * 100) + "%"
      }
    }
  },
  {
    title: '折后单价',
    align: "center",
    dataIndex: 'afterzhekouPrice'
  },
  {
    title: '总金额',
    align: "center",
    dataIndex: 'afterzhekouPrice'
  },
];

// 售后列表表头
const afterTitle = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '售后单号',
    align: "center",
    dataIndex: 'afterCode'
  },
  {
    title: '更新时间',
    align: "center",
    dataIndex: 'createTime'
  },
  {
    title: '售后类型',
    align: "center",
    dataIndex: 'afterSalesType',
    customRender: function (text) {
      if (text == '0') {
        return '退货'
      } else if (text == '1') {
        return '换货'
      } else if (text == '2') {
        return '返修'
      } else if (text == '3') {
        return '重做'
      }
    }
  },
  {
    title: '状态',
    align: "center",
    dataIndex: 'afterstatus',
    customRender: function (text) {
      if (text == '0') {
        return '已提交'
      } else if (text == '1') {
        return '已驳回'
      } else if (text == '2') {
        return '售后中'
      } else if (text == '3') {
        return '已完成'
      } else if (text == '4') {
        return '已发货'
      } else if (text == '5') {
        return "平台已收货"
      }
    }
  },
  {
    title: '操作',
    align: "center",
    scopedSlots: {
      customRender: 'k6'
    }
  }
];

const columns1 = [{
  dataIndex: 'k1',
  key: 'k1',
  title: '序号',
},
  {
    title: '面料',
    dataIndex: 'k2',
    key: 'k2',
  },
  {
    title: '米数',
    dataIndex: 'k3',
    key: 'k3',
  },
  {
    title: '标准单价',
    key: 'k4',
    dataIndex: 'k4'
  },
  {
    title: '阶梯折扣',
    key: 'k5',
    dataIndex: 'k5'
  },
  {
    title: '客户折扣',
    key: 'k6',
    dataIndex: 'k6',
    scopedSlots: {
      customRender: 'k6'
    },
  },
  {
    title: '折后单价',
    key: 'k7',
    dataIndex: 'k7',
    scopedSlots: {
      customRender: 'k7'
    },
  },
  {
    title: '总金额',
    key: 'k8',
    dataIndex: 'k8',
    scopedSlots: {
      customRender: 'k8'
    },
  },
];
const columns7 = [{
  dataIndex: 'k1',
  key: 'k1',
  title: '序号',
},
  {
    title: '售后单号',
    dataIndex: 'k2',
    key: 'k2',
  },
  {
    title: '售后类型',
    dataIndex: 'k3',
    key: 'k3',
  },
  {
    title: '申请时间',
    key: 'k4',
    dataIndex: 'k4'
  },

  {
    title: '状态',
    key: 'k5',
    dataIndex: 'k5',
    scopedSlots: {
      customRender: 'k5'
    },
  },
  {
    title: '操作',
    key: 'k6',
    dataIndex: 'k6',
    scopedSlots: {
      customRender: 'k6'
    },
  }
];
const columns2 = [{
  dataIndex: 'k1',
  key: 'k1',
  title: '序号',
},
  {
    title: '品类',
    dataIndex: 'k2',
    key: 'k2',
  },
  {
    title: '性别',
    dataIndex: 'k3',
    key: 'k3',
  },
  {
    title: '标准单价',
    key: 'k4',
    dataIndex: 'k4'
  },
  {
    title: '阶梯折扣',
    key: 'k5',
    dataIndex: 'k5'
  },
  {
    title: '客户折扣',
    key: 'k6',
    dataIndex: 'k6',
    scopedSlots: {
      customRender: 'k6'
    },
  },
  {
    title: '折后单价',
    key: 'k7',
    dataIndex: 'k7',
    scopedSlots: {
      customRender: 'k7'
    },
  },
  {
    title: '总金额',
    key: 'k8',
    dataIndex: 'k8',
    scopedSlots: {
      customRender: 'k8'
    },
  },
];
const data1 = [{
  k1: '1',
  k2: '23341964AQ',
  k3: '2020-06-01',
  k4: '2264AA',
  k5: '40米',
  k6: '80%',
  k7: '304元/米',
  k8: '7600元'
}]
const data5 = [{
  k1: '1',
  k2: 'UOSL1334',
  k3: '返修',
  k4: '2020-06-10',
  k5: '等待审核',
  k6: '查看售后状态'
}]

export default {
  name: 'MyAfterSales',
  data() {
    return {
      // 全局lodding加载
      fullscreenLoading: false,
      wx_order_no: '',//微信订单号
      intjishi: '',
      is_show: 0,
      is_wxshow: 0,
      is_wx: 0,
      loading: false,
      orderFujiaList: [], // 订单已选中附加条件列表
      limg: [], // 量体图片数组
      fuwuFabricTitle, // 里布等表头
      shouFeiList: [], //里布、纽扣列表
      shouFeiPrice: '', // 里布、纽扣价格
      jiajia,
      jiajiaList: [], // 加价列表
      allprolist,
      fabriclist,
      autohor_token: localStorage.getItem("token"), //token
      orderTrackingList: [], // 订单跟踪列表
      drawer: false, // 支付弹窗
      radio1: '', // 支付方式
      userDetail: {}, // 当前账户详情
      identity: '',  // 账号身份
      url: {
        orderDetail: '/fabricAndOther/getDingleOrderDetail', // 个定订单详情
        getOrderTracking: "/Order/getFabricOrderTracking", // 订单状态跟踪
        listtrackingProduct: "/Order/listtrackingProduct", // 产品状态跟踪
        // listtrackingProduct: "/orderCenter/listtrackingProduct", // 产品状态跟踪
        listTeamAfter: '/Order/listTeamAfter', // 订单售后记录
        userDetail: '/fabricAndOther/getUserDetail', // 查余额
        listJiajia: '/fabricAndOther/listJiajia', // 查询所有加价服务
        shouFeifuwuXiang: '/fabricAndOther/shouFeifuwuXiang', // 个订收费服务项的价格（里布、纽扣等的价格）
        listFujia: '/fabricAndOther/listFujia', // 订单附加条件列表
        buyNow: '/Order/buyNow', // 立即支付
        show_data_token: '/user/interface/query_userInfoBytoken' // 查询当前账号的信息
      },
      afterTitle,
      afterlist: [], // 售后订单列表
      // 分页
      pagination: {
        current: '',
        total: 0,
        pageSize: 10,//每页中显示10条数据
      },
      orderDetail: {},// 个定订单详情
      productlistTracking: [],// 产品状态跟踪
      columns1,
      columns7,
      columns2,
      data1,
      data5,
      locale,
      selectedRowKeys: [],
      tab1Data: [{
        id: 1,
        name: '无需试穿'
      },
        {
          id: 2,
          name: '半成品试穿'
        },
        {
          id: 3,
          name: '毛坯半成品试穿'
        },
      ],
      tab1Idx: -1,
      tab2Data: [{
        id: 1,
        name: '常规',
        hoveName: '7个工作日'
      },
        {
          id: 2,
          name: '加急',
          hoveName: '5个工作日200元'
        },
        {
          id: 3,
          name: '特急',
          hoveName: '3个工作日400元'
        },
      ],
      tab2Idx: -1,
      tab3Data: [{
        id: 1,
        name: '来款/样式'
      },
        {
          id: 2,
          name: '改款'
        },
      ],
      tab3Idx: -1,
      tab4Data: [{
        id: 1,
        name: '派定制'
      },],
      tab4Idx: -1,
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  // mounted() {
  //   this.intjishi = setInterval(this.get, 1000);
  // },
  created() {
    this.getorderDetail()
    this.Tracking()
    this.productTracking()
    this.getAfterList()
    this.getuserDetail()
    this.listJiajiaFunc()
    this.shouFeifuwuXiangFunc()
    this.listFujiaFunc()
    this.show_userinfo()
  },
  destroyed() {
    window.clearInterval(this.intjishi);
  },
  methods: {

    /**
     * 生成二维码
     */
    bindQRCode(url) {
      new QRCode(this.$refs.qrCodeDiv, {
        text: url,
        width: 180,
        height: 180,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
      })
    },
    change_redio(is_show) {
      if (is_show == '1') {
        this.is_wxshow = 0;
      } else if (is_show == '2') {
        if (this.is_wx == 0) {
          this.is_wxshow = 0;
        } else {
          this.is_wxshow = 1;
        }
      } else {
        this.is_wxshow = 0;
      }
    },
    /**
     * 获取当前登录账号的信息
     */
    show_userinfo() {
      let autohor_token = localStorage.getItem("token");
      let params = {token: autohor_token};
      postAction(domain.publicUrl + this.url.show_data_token, Qs.stringify(params)).then(res => {
        let result = res.data;
        if (result.code == 0) {
          this.identity = result.data.identity;
        }
      })
    },

    /**
     * 获取已经选择的附加条件
     */
    listFujiaFunc() {
      getAction(domain.publicUrl + this.url.listFujia, {
        'orderSn': this.$route.query.order
      }).then(res => {
        if (res.data.code == 0) {
          this.orderFujiaList = res.data.data
        }
      })
    },

    /**
     * 获取里布价格列表
     */
    shouFeifuwuXiangFunc() {
      getAction(domain.publicUrl + this.url.shouFeifuwuXiang, {
        'orderSn': this.$route.query.order
      }).then(res => {
        if (res.data.code == '0') {
          this.shouFeiList = res.data.data
          this.shouFeiPrice = res.data.price
        }
      })
    },

    /**
     * 获取加价服务列表
     */
    listJiajiaFunc() {
      getAction(domain.publicUrl + this.url.listJiajia, {
        'orderSn': this.$route.query.order
      }).then(res => {
        if (res.data.code == '0') {
          this.jiajiaList = res.data.data
          // this.jiajiaMoney = res.data.allMoney
        } else {
          this.$message.error("查询失败")
        }
      })
    },

    // 立即支付
    buynow() {
      if (this.radio1 == '') {
        this.$notify.warning({
          title: "提示",
          message: '请选择支付方式',
          duration: 1500,
        });
        return;
      } else if (this.radio1 == '1') {//支付宝
        this.loading = true;
        this.is_wx = 0;
        this.is_wxshow = 0;
        let autohor_token = localStorage.getItem("token");
        var params = {token: autohor_token, orderType: "1", applyMethod: "1", orderSn: this.orderDetail.orderSn};
        postAction(domain.publicUrl + "/ali/pay/order/create", Qs.stringify(params)).then(res => {
          var result = res.data;
          if (result.code == "1") {
            this.drawer = false;
            this.is_show = 1;
            this.loading = false;
            document.write(result.data.body)
          } else {
            this.is_show = 0;
            this.$message.error(result.msg)
            this.loading = false;
          }
        })
      } else if (this.radio1 == '2') {//微信支付
        this.loading = true;
        this.wx_order_no = '';
        let autohor_token = localStorage.getItem("token");
        var params = {token: autohor_token, orderType: "1", applyMethod: "2", orderSn: this.orderDetail.orderSn};
        postAction(domain.publicUrl + "/WxPay/wx/pay/order_create", Qs.stringify(params)).then(res => {
          var result = res.data;
          if (result.data.resultCode == "SUCCESS") {
            this.is_show = 0;
            this.is_wxshow = 1;
            this.is_wx = 1;
            this.$nextTick(function () {
              this.bindQRCode(result.data.codeURL);
            })
            this.loading = false;
            this.wx_order_no = result.msg;
            this.intjishi = setInterval(() => {
              this.wx_pay_status()
            }, 1000);
          } else {
            this.is_show = 0;
            this.is_wxshow = 0;
            this.$message.error("微信支付失败，请重新发起订单支付")
            this.loading = false;
          }
        })
      } else if (this.radio1 == '3') {
        this.is_wxshow = 0;
        this.is_wx = 0;
        getAction(domain.publicUrl + this.url.buyNow, {
          'token': this.autohor_token,
          'orderType': 0,
          'orderSn': this.orderDetail.orderSn,// 订单编号
        }).then(res => {
          this.drawer = false
          if (res.data.code == '0') {
            this.$notify.success({
              title: "提示",
              message: "支付成功",
              duration: 1500,
            });
            this.$router.go(-1)
          } else {
            this.$notify.warning({
              title: "提示",
              message: res.data.msg,
              duration: 1500,
            });
          }
        })
      }
    },
    //微信支付状态判断
    wx_pay_status() {
      // console.info(this.wx_order_no)
      getAction(domain.publicUrl + "/logic/interface/query_wxStatusDetailBywxSn", {
        'wx_out_orderSn': this.wx_order_no
      }).then(res => {
        let result = res.data;
        if (result.code == 0) {
          if (result.data.status == 2) {//已支付
            //跳转成功界面
            window.clearInterval(this.intjishi);//销毁定时器
            this.$message.success("订单支付成功！")
            // this.$router.push({path:'/my-order'});
            this.$router.push('/');
          } else if (result.data.status == 1) {//取消支付
            window.clearInterval(this.intjishi);//销毁定时器
            this.$message.error("你已取消了订单支付")
          } else {//未支付
            // window.clearInterval(this.intjishi);//销毁定时器
            // this.$message.error("请前往支付！")
          }
        } else {
          this.$message.error("正在支付中")
        }
      })
    },

    // 查询用户详情
    getuserDetail() {
      getAction(domain.publicUrl + this.url.userDetail, {
        'token': this.autohor_token
      }).then(res => {
        if (res.data.code == '0') {
          this.userDetail = res.data.data
        }
      })
    },

    // 获取个定订单详情
    getorderDetail() {
      const loading = this.$loading({
        lock: true,
        text: '数据拼命加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getAction(domain.publicUrl + this.url.orderDetail, {
        'token': this.autohor_token,
        'orderSn': this.$route.query.order
      }).then(res => {
        loading.close();
        if (res.data.code == '0') {
          this.orderDetail = res.data.data
        }
      })
    },

    // 获取团订订单售后记录列表
    getAfterList() {
      getAction(domain.publicUrl + this.url.listTeamAfter, {
        'token': this.autohor_token,
        'orderSn': this.$route.query.order,
        'orderType': 0
      }).then(res => {
        if (res.data.code == '0') {
          this.afterlist = res.data.data.records
          this.pagination.total = res.data.data.total
          this.pagination.current = res.data.data.current
        }
      })
    },

    // 分页器方法
    handleTableChange(page, pageSize) {
      getAction(domain.publicUrl + this.url.listTeamAfter, {
        'pageNo': page.current,
        'pageSize': page.current.pageSize,
        'token': this.autohor_token,
        'orderSn': this.$route.query.order,
        'orderType': 0
      }).then(res => {
        if (res.data.code == '0') {
          this.afterlist = res.data.data.records
          this.pagination.total = res.data.data.total
          this.pagination.current = res.data.data.current
        }
      })
    },

    // 订单状态跟踪
    Tracking() {
      getAction(domain.publicUrl + this.url.getOrderTracking, {
        'token': this.autohor_token,
        'orderType': 0,
        'orderSn': this.$route.query.order
      }).then(res => {
        if (res.data.code == '0') {
          this.orderTrackingList = res.data.data
        }
      })
    },
    // 产品状态跟踪
    productTracking() {
      getAction(domain.publicUrl + this.url.listtrackingProduct, {
        'token': this.autohor_token,
        'orderSn': this.$route.query.order
      }).then(res => {
        if (res.data.code == '0') {
          this.productlistTracking = res.data.data
        }
      })
    },

    selectTab: function (dataStr, i) {
      this[dataStr] = i
    }
  }
}
</script>

<style scoped lang="scss">
.pay {
  width: 100%;
  height: 100%;
}

.roder-details {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  padding: 20px 35px;

  .info {
    padding-top: 30px;
    padding-left: 26px;
    position: relative;
    min-height: 800px;


    .text11 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        h5 {
          color: #333;
          font-size: 15px;
          font-weight: 500;

          display: block;
        }

        p {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          display: block;
        }
      }
    }

    .title10 {
      color: #333;
      font-weight: 700;
      font-size: 16px;
      line-height: 16px;
      margin-bottom: 20px;
    }

    .text10 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        span {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          &.b {
            font-weight: 500;
          }

          display: block;
        }
      }
    }

    .table-css {
      position: relative;

      .bz {
        width: 447px;
        height: 63px;
        background: inherit;
        background-color: rgba(255, 221, 202, 1);
        position: absolute;
        right: 0px;
        top: -63px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;

        p {
          width: 100%;
          color: rgb(251, 8, 8);
          font-size: 13px;
          padding-left: 10px;
          margin-bottom: 0px;
          line-height: 16px;
        }
      }
    }

    .btns {
      margin-top: 25px;
      margin-bottom: 60px;
      display: flex;

      .btn1 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(81, 81, 81, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(236, 227, 0);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }

      .btn2 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(244, 244, 244, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(104, 104, 104);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }
    }


    .price {
      color: rgb(38, 38, 38);
      font-size: 16px;

      span {
        color: rgb(215, 1, 1);
      }

      margin: 35px 0px;
    }

    .text1 {
      width: 533px;
      height: 105px;
      padding: 3px 2px 3px 2px;
      font-family: 'ArialMT', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      text-decoration: none;
      letter-spacing: normal;
      color: #000000;
      vertical-align: none;
      text-align: left;
      text-transform: none;
      background-color: #f9f9f9;
      border-color: transparent;
      resize: none;
      outline: none;
      padding: 10px;
    }

    .tabs {
      .tab {
        margin-bottom: 10px;
        display: flex;

        h5 {
          width: 112px;
          padding: 2px 2px 2px 24px;
          background-color: rgba(249, 249, 249, 1);
          font-size: 15px;
          color: #333;
          display: flex;
          height: 36px;
          align-items: center;
          margin: 0px !important;
          margin-right: 6px !important;
        }

        .tab-content {
          height: 36px;
          display: flex;

          p {
            border: 1px solid rgb(242, 242, 242);
            min-width: 100px;
            height: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            color: #333;
            font-size: 15px;
            margin-right: 6px;

            cursor: pointer;

            b {
              display: none;
              font-weight: 700;
            }

            &.active {
              color: rgb(255, 236, 112);
              font-weight: 700;
              background-color: rgb(74, 74, 74);
            }

            &:hover {
              b {
                display: block;
              }

              span {
                display: none;
              }
            }
          }
        }
      }
    }

    h3.title {
      height: 30px;
      line-height: 30px;
      position: relative;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      margin-bottom: 25px;

      &:after {
        position: absolute;
        height: 100%;
        width: 5px;
        position: absolute;
        left: -25px;
        top: 0px;
        background-color: rgba(74, 74, 74, 1);
        content: "";
      }
    }

    .title2 {
      width: 112px;
      padding: 2px 2px 2px 24px;
      font-size: 15px;
      color: #333;
      display: flex;
      height: 36px;
      align-items: center;
      margin: 0px !important;
      margin-bottom: 10px !important;
    }

    .list {
      margin-bottom: 20px;

      .list-div {
        display: flex;
        flex-wrap: wrap;

        div {
          width: 33.3%;
          display: flex;
          height: 36px;
          align-items: center;

          p {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
          }

          span {
            width: calc(100% - 112px);
            padding: 2px 2px 2px 24px;
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;

            &.b {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
